<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/plugin-element/plugin-element.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="shop-common-styles.html">
<dom-module id="shop-my">
    <template>
        <style include="shop-common-styles">
            paper-icon-item iron-icon[slot=item-icon]{
                height: 40px;
                width: 40px;
            }
            paper-icon-item iron-icon{
                color: #666;
            }
            paper-item-body div[secondary]{
                font-size: 12px;
            }
            div[role=listbox] a{
                color: #000;
                text-decoration: none;
            }
        </style>
        <plugin-xhr id="api" url="[[app.apiHost]]/plugin.app.call"></plugin-xhr>
        <plugin-xhr id="count_payment_pending" url="[[app.apiHost]]/my.trade.count.payment.pending" response="{{count_payment_pending}}"></plugin-xhr>
        <plugin-xhr id="count_delivered" url="[[app.apiHost]]/my.trade.count.delivered" response="{{count_delivered}}"></plugin-xhr>
        <plugin-xhr id="count_coupon_expiration" url="[[app.apiHost]]/my.coupon.count.expiration" response="{{count_coupon_expiration}}"></plugin-xhr>
        <plugin-xhr id="count_coupon_available" url="[[app.apiHost]]/my.coupon.count.available" response="{{count_coupon_available}}"></plugin-xhr>
        <div role="listbox">
            <a href="/my-trades">
              <paper-icon-item>
                <iron-icon icon="assignment" slot="item-icon"></iron-icon>
                <paper-item-body two-line>
                  <div>我的订单</div>
                  <div secondary>[[count_payment_pending.result.count]]个订单待支付，[[count_delivered.result.count]]个订单待发货</div>
                </paper-item-body>
                <iron-icon icon="chevron-right"></iron-icon>
              </paper-icon-item>
            </a>
            <a href="/my-coupons">
                <paper-icon-item>
                <iron-icon icon="card-giftcard" slot="item-icon"></iron-icon>
                <paper-item-body two-line>
                  <div>我的优惠卷</div>
                  <div secondary>[[count_coupon_available.result.count]]张优惠卷可用
                    <template is="dom-if" if="[[!_equal(count_coupon_expiration.result.count,0)]]">
                        ，[[count_coupon_expiration.result.count]]张即将过期
                      </template>
                    </div>
                </paper-item-body>
                <iron-icon icon="chevron-right"></iron-icon>
              </paper-icon-item>
            </a>
        </div>
    </template>

    <script>
        class ShopMy extends PluginElement {

            static get is() {
                return 'shop-my';
            }

            static get properties() {
                return {

                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    }
                }
            }
            _visibleChanged(visible) {
                if(visible){
                    this.$.count_payment_pending.param("app_id",app.appId).get();
                    this.$.count_delivered.param("app_id",app.appId).get();
                    this.$.count_coupon_expiration.param("app_id",app.appId).get();
                    this.$.count_coupon_available.param("app_id",app.appId).get();
                }
            }
        }

        customElements.define(ShopMy.is, ShopMy);

    </script>

</dom-module>
